<ion-view id="category" view-title="商品分类" hide-back-button="true" cache-view="false" class="animated slideInRight">
  <ion-header-bar align-title="center" class="bar-stable item-input-inset">
    <div class="buttons">
      <button ng-click="goBack()" class="button icon ion-chevron-left" style="border:none"></button>
    </div>
    <label class="item-input-wrapper">
      <input type="text">
    </label>
    <div class="buttons">
      <button  class="button icon ion-android-menu" style="border:none"></button>
    </div>
  </ion-header-bar>
  <!--  这里需要加上scroll="false",禁用弹性下拉效果 -->
  <ion-content scroll="false">
    <!-- 这里是左侧分类列表 -->
    <nav id="nav">
      <ul>
        <!-- $event是事件参数 -->
        <li ng-class="$first?'nav-current':'nav-blur'"
            ng-repeat="item in categoryData"

            ng-click="categoryLeftClick($event,item.typeNumber);getCategoryDetailData(item.typeNumber)">{{item.name}}</li>
      </ul>
    </nav>
    <div id="pro">
      <!-- 这里注意必需加在ion-content标签上 -->
      <ion-content lazy-scroll>
        <div class="content">
          <div class="banner">
            <img
              image-lazy-src="img/category/banner_1.jpg" alt="">
          </div>
          <div class="content-title">
            <span>热卖品类</span>
          </div>
          <div class="content-body">
            <!-- item.typeNumber="13345"
             ui-serf="goodsList({typeNumber:13345})"
             传递参数的方式,是使用ur-sref,类似调用方法的形式
             方法的参数是一个object对象,对象的属性就是对应的路由的属性，属性的值，就是想要 传入的值.
             -->
            <li class="content-body-list" ng-repeat="item in categoryDetailData"
                ui-sref="goodsList({typeNumber:{{item.typeNumber}}})">
              <img
                image-lazy-src="{{item.src}}" alt=""

                image-lazy-loader="lines"

                image-lazy-distance-from-bottom-to-load="100">
              <span>{{item.name}}</span>
            </li>
          </div>
          <div class="content-title">
            <span>冬季新品</span>
          </div>
          <div class="content-body">
            <li class="content-body-list" ng-repeat="item in categoryDetailData2">
              <img image-lazy-src="{{item.src}}" alt="" image-lazy-loader="lines">
              <span>{{item.name}}</span>
            </li>
          </div>
        </div>
        <div class="content-title">
          <span>测试图片延迟加载</span>
        </div>
        <div class="content-body">
          <li class="content-body-list">
            <img image-lazy-src=" http://m.360buyimg.com/mobile/s100x100_jfs/t1921/153/128855719/34476/1ba02abc/55f12e38N94438a7f.jpg" alt="" image-lazy-loader="lines">
            <span>猫粮</span>
          </li>
        </div>
      </ion-content>
    </div>
  </ion-content>
</ion-view>
